<template>
  <div class="home">
    <!--自动播放音乐组件-->
    <!--<auto-music></auto-music>-->
    <!--预约试驾组件-->
    <!--<test-drive></test-drive>-->
    <swiper class="main-swiper" :options="swiperOption" ref="mainSwiper">
      <!-- slides -->
      <swiper-slide>
        <router-link to="poster" class="animated fadeInDown" swiper-delay=".3s">页面跳转</router-link>
        <router-link to="poster" class="animated fadeInDown" swiper-delay=".6s">页面跳转</router-link>
        <img class="animated zoomIn" swiper-delay=".9s" src="@/assets/img/logo.png">
      </swiper-slide>
      <swiper-slide>
        <router-link to="poster" class="animated fadeInDown" swiper-delay=".3s">页面跳转</router-link>
      </swiper-slide>
      <swiper-slide>
        <router-link to="poster" class="animated fadeInDown" swiper-delay=".3s">页面跳转</router-link>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  // require styles
  import 'swiper/dist/css/swiper.css'

  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import API from '@/api'
  import testDrive from '@/components/testdrive'
  import autoMusic from '@/components/automusic'

  export default {
    name: "home",
    components: {
      swiper,
      swiperSlide,
      testDrive,
      autoMusic
    },
    data() {
      const _this = this
      return {
        swiperOption: {
          direction: 'vertical',
          initialSlide: 0,
          on : {
            init: function () {
              _this.$global._swiper.startAnimate(this)
            },
            slideChangeTransitionStart() {
              const index = this.realIndex
              console.log(index)
            },
            slideChangeTransitionEnd: function () {
              _this.$global._swiper.startAnimate(this)
            }
          }
        }
      }
    },
    computed: {
      mainSwiper() {
        return this.$refs.mainSwiper.swiper
      }
    },
    created(){
      // 接口请求
      /*API.GetJson({}).then((res)=>{
        console.log(res)
      })*/
    },
    mounted() {
      // this.mainSwiper.slideTo(1)
    },
    methods : {

    }
  }
</script>

<style lang="scss">
  html, body, #app{height: 100%;}
  .main-swiper{
    height: 100%;
    .swiper-wrapper{
      height: 100%;
    }
  }
</style>

<style lang="scss" scoped>
  .home{height: 100%;}
</style>
